<template>
  <BasicTable @register="registerTable" @selection-change="handleSelectionChange">
    <template #toolbar>
      <a-button @click="handleAdd" type="primary">绑定应用</a-button>
      <a-button v-show="selectedRows.length > 0" @click="handleSync" type="primary">同步应用</a-button>
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'synStatus'">
        {{ record.synStatus === 0 ? '未同步' : '已同步' }}
      </template>
    </template>
    <template #action="{ record }">
      <TableAction
        :actions="[
          {
            label: '详情',
            icon: 'ant-design:file-outlined',
            onClick: handleView.bind(null, record),
          },
        ]"
      />
    </template>
  </BasicTable>
  <TenantApplicationModal @register="registerModal" @success="reload" />
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
  import { message, Modal } from 'ant-design-vue';
  import { getTenantApplicationList, synTenantApplication } from '/@/api/tenant';
  import { applicationSearchFormSchema, tenantApplicationColumns } from './tenant.data';
  import TenantApplicationModal from './components/TenantApplicationModal.vue';
  import { useModal } from '/@/components/Modal';
  import dayjs from 'dayjs';

  const selectedRows = ref<Recordable[]>([]);

  const [registerTable, { reload, updateTableDataRecord }] = useTable({
    title: '租户应用列表',
    api: getTenantApplicationList,
    rowKey: 'id',
    columns: tenantApplicationColumns,
    showIndexColumn: true,
    rowSelection: {
      type: 'radio',
    },
    tableSetting: {
      cacheKey: 'tenant_application_list',
    },
    formConfig: {
      labelWidth: 100,
      schemas: applicationSearchFormSchema,
      autoSubmitOnEnter: true,
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    beforeFetch({ pageIndex, pageSize, ...model }) {
      const beginTime = model?.createTime?.[0] ? dayjs(model?.createTime?.[0]).format('YYYY-MM-DD 00:00:00') : undefined;
      const endTime = model?.createTime?.[1] ? dayjs(model?.createTime?.[1]).format('YYYY-MM-DD 23:59:59') : undefined;
      return {
        pageIndex,
        pageSize,
        model: {
          ...model,
          beginTime,
          endTime,
          createTime: undefined,
        },
      };
    },
    actionColumn: {
      width: 200,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  const [registerModal, { openModal }] = useModal();

  const handleAdd = () => {
    openModal(true, {
      type: 'create',
    });
  };

  const handleSync = () => {
    Modal.confirm({
      title: '确认操作',
      content: '确定要进行此操作吗?',
      onOk: async () => {
        await synTenantApplication(selectedRows.value[0]);
        message.success('操作成功！');
        reload();
      },
    });
  };

  const handleSelectionChange = ({ rows }) => {
    selectedRows.value = rows;
  };

  const handleView = (record: Recordable) => {
    openModal(true, {
      record,
      type: 'detail',
    });
  };
</script>
<style scoped></style>
